<template>
  <div class="comments">
    <h5 v-show="hotComments.length > 0">精彩评论</h5>
    <div class="commentList">
      <comment-item
        v-for="item in hotComments"
        :key="item.commentId"
        :id="id"
        :imgUrl="item.user.avatarUrl"
        :userName="item.user.nickname"
        :content="item.content"
        :time="item.time"
        :commentId="item.commentId"
        :likeCount="item.likedCount"
        :type="type"
        :reply="item.beReplied ? item.beReplied : null"
      ></comment-item>
    </div>
    <h5 ref="newComment" v-show="newComments.length > 0">
      最新评论({{ totalCount }})
    </h5>
    <div class="commentList">
      <comment-item
        v-for="item in newComments"
        :key="item.commentId"
        :id="id"
        :imgUrl="item.user.avatarUrl"
        :userName="item.user.nickname"
        :content="item.content"
        :time="item.time"
        :commentId="item.commentId"
        :likeCount="item.likedCount"
        :type="type"
        :reply="item.beReplied ? item.beReplied : null"
      ></comment-item>
    </div>
    <paging
      :totalPages="totalPages"
      :pagingMethod="getNewComment"
      v-show="newComments.length > 0"
    ></paging>
    <div class="tip" v-show="newComments.length === 0">暂时没有评论</div>
  </div>
</template>

<script>
import { getMusicCommentAPI, getHotCommentAPI } from "@/api";
import CommentItem from "@/components/CommentItem";
import Paging from "@/components/Paging";
export default {
  name: "comment",
  components: {
    CommentItem,
    Paging,
  },
  data() {
    return {
      hotComments: [], //热评
      newComments: [], //最新评论
      offset: 0, //偏移量
      totalPages: 0, //总页数
      totalCount: 0,
      type: 2, //传递给分页组件使用
    };
  },
  methods: {
    // 获取热门评论
    async getHotComment() {
      const res = await getHotCommentAPI({ id: this.id, type: 2 });
      if (res.data.code == 200) {
        this.hotComments = res.data.hotComments;
      } else alert("获取热门评论失败");
    },
    // 获取最新评论
    async getNewComment(n) {
      let cursor = null;
      if (n > 1) cursor = this.newComments[19].time;
      const res = await getMusicCommentAPI({
        id: this.id,
        type: 2,
        sortType: 3,
        pageSize: 30,
        pageNo: n,
        cursor,
      });
      if (res.data.code == 200) {
        this.totalCount = res.data.data.totalCount;
        this.newComments = res.data.data.comments;
        this.totalPages = Math.ceil(this.totalCount / 30); //设置总页数
        if (n != 1) {
          this.main.scrollTo({ top: this.$refs.newComment.offsetTop - 60 });
        }
      } else alert("获取最新评论失败");
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    main() {
      return this.$store.state.scroll.main;
    },
  },
  created() {
    this.getHotComment();
    this.getNewComment(1);
  },
};
</script>
<style lang="less" scoped>
.comments {
  width: 90%;
  margin: 0 auto;
  h5 {
    color: #444;
    margin-left: 10px;
  }
  .commentList {
    width: 90%;
    margin: 0 auto;
  }
}
.tip {
  margin: 100px auto;
  text-align: center;
  color: #ccc;
  font-size: 16px;
}
</style>